<template>
	<view v-if="!loading">
		<slot></slot>
	</view>
	<view class="kui-skeleton kui-w-full kui-flex kui-flex-col" v-else>
		<view class="kui-h-20 kui-relative kui-rounded-md kui-flex-shrink-0 kui-overflow-hidden kui-mb-3" :class="[state.animateClass]" :style="[commonStyle, cardStyle]" v-if="card">
			<view class="kui-skeleton--animation" v-if="animate && !state.animateClass"></view>
		</view>
		<view class="kui-flex">
			<view class="kui-relative kui-rounded-md kui-flex-shrink-0 kui-mr-4 kui-overflow-hidden" :class="[state.animateClass]" :style="[commonStyle, avatarStyle]" v-if="avatar">
				<view class="kui-skeleton--animation" v-if="animate && !state.animateClass"></view>
			</view>
			<view class="kui-w-full">
				<view
					class="kui-h-3 kui-rounded-sm kui-mb-2 kui-relative kui-overflow-hidden"
					:class="[state.animateClass]"
					:style="[commonStyle, rowStyle(), titleStyle]"
					v-if="title"
				>
					<view class="kui-skeleton--animation" v-if="animate && !state.animateClass"></view>
				</view>
				<template v-for="item in state.rows" :key="item">
					<view class="kui-h-3 kui-rounded-sm kui-mb-2 kui-relative kui-overflow-hidden" :class="[state.animateClass]" :style="[commonStyle, rowStyle(item-1)]">
						<view class="kui-skeleton--animation" v-if="animate && !state.animateClass"></view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { reactive, defineComponent, CSSProperties, getCurrentInstance, computed } from 'vue';

import SkeletonProps from './props';

const name = 'kui-skeleton';

export default defineComponent({
	name,
	props: SkeletonProps,
	options: {
		// 小程序虚拟节点设置
		virtualHost: true
	},
	setup(props) {
		const { proxy }: any = getCurrentInstance();
		const theme = proxy.$theme;
		
		const state = reactive({
			rows: props.rows,
			animateClass: (props.animate && props.animateType === 'flash') ? 'kui-animate-pulse' : ''
		});
		
		const titleStyle = computed(() => {
			const style: CSSProperties = reactive({});

			style.width = '50%';

			return style;
		});
		
		const bgColor = props.backgroundColor ? props.backgroundColor : theme.colors['dark']['grey'][8];
		
		const commonStyle = computed(() => {
			const style: CSSProperties = reactive({});
			
			style.backgroundColor = bgColor;
			
			// if ()
			
			return style;
		});

		const rowStyle = (item: number = 0) => {
			const style: CSSProperties = reactive({});

			style.height = props.height ? props.height : '';
			style.width = props.width ? props.width : '';
			
			// 自定义段落宽度
			if (props.rowsWidth) {
				style.width = props.rowsWidth[item];
			}
			
			// 段落圆角
			if (props.rowsRound) {
				style.borderRadius = '100rpx';
			}

			return style;
		};
		
		const avatarStyle = computed(() => {
			const style: CSSProperties = reactive({});
			
			style.width = style.height = props.avatarSize ? props.avatarSize : '100rpx';
			
			style.borderRadius = props.avatarShape === 'round' ? style.width : '';
			
			return style;
		});
		
		const cardStyle = computed(() => {
			const style: CSSProperties = reactive({});
			
			style.width = '100%';
			style.height = props.cardHeight ? props.cardHeight : '300rpx';
			
			return style;
		});

		return {
			commonStyle,
			titleStyle,
			rowStyle,
			avatarStyle,
			cardStyle,
			state
		};
	}
});
</script>

<style lang="less">
.kui-skeleton {
	&--animation {
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			animation: backpos 1.5s infinite;
			background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%);
			transition: 0.25s background-color;
		}
	}
}

@keyframes backpos {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(100%);
	}
}
</style>
